<link rel="stylesheet" type="text/css" href="{{ toolbar_css }}"/>

<div id="pdf_annotation_bar">
    <div id="pdf_annotation_icons">
        <a value="cursor" class="fas fa-mouse-pointer toolbar-item"></a>
        <a value="pen" class="fas fa-pencil-alt toolbar-item"></a>
        <a value="eraser" class="fas fa-eraser toolbar-item"></a>
        {#TODO: In the future, we want a erase function rather than a clear function#}
        {#<a value="clear" class="fas fa-ban toolbar-action" style="text-align: center; margin-left: 8px; font-size: 25px; padding-bottom: 10px"></a>#}
        {#<a value="rect" class="far fa-object-group toolbar-item"></a>#}
        <a value="rotate" class="fas fa-redo toolbar-action"></a>
        <a value="text" class="fas fa-font toolbar-item"></a>
        <a value="zoomin" class="fas fa-plus toolbar-action"></a>
        <a value="zoomcustom" class="toolbar-action"></a>
        <a value="zoomout" class="fas fa-minus toolbar-action"></a>
        <a value="save" class="toolbar-action">Save</a>
        {#<a value="download" class="fas fa-download toolbar-action"></a>#}
        <a value="color" id="color_selector" class="toolbar-action"></a>
        <a value="size" id="size_selector" class="fas fa-expand-arrows-alt toolbar-action"></a>
    </div>
    <div id="size_selector_menu" class="selection-menu">
        Pen size:
        <br>
        <input id="pen_size_selector" type="range" min="0.1" max="10" step="0.1" style="width:70%" oninput="pen_size_value.value=value">
        <output id="pen_size_value"></output>
        <br>
        Text size:
        <br>
        <select id="text_size_selector">
            {% set vals = [8, 9, 10, 11, 12, 14, 18, 24, 30, 36, 48, 60, 72, 96] %}
            {% for val in vals %}
                <option value="{{ val }}">{{ val }}</option>
            {% endfor %}
        </select>
    </div>
    <div id="color_selector_menu" class="selection-menu">
        {% set colors = ['#000000',
                         '#EF4437',
                         '#E71F63',
                         '#8F3E97',
                         '#65499D',
                         '#4554A4',
                         '#2083C5',
                         '#35A4DC',
                         '#09BCD3',
                         '#8BC34A',
                         '#FDC010',
                         '#F8971C',
                         '#F0592B',
                         '#F06291',
                         '#FF0000'] %}
        {% for color in colors %}
            <a class="color" value="{{ color }}" style="background: {{ color }}" onclick="emitEvent(this)"></a>
        {% endfor %}
    </div>
</div>

<script>
    //TODO: move to js file
    let colorEvent;
    if(document.createEvent){
        colorEvent = document.createEvent("HTMLEvents");
        colorEvent.initEvent('colorchange', true, true);
    }
    else {
        colorEvent = document.createEventObject();
        colorEvent.eventType = "colorchange";
    }

    colorEvent.eventName = "colorchange";

    function emitEvent(elem){
        if(document.createEvent){
            elem.dispatchEvent(colorEvent);
        }
    }
</script>
